<template>
    <div class="cus">
        <div class="cus_box">
          <div class="title"><span>{{res.id?'编辑':'添加'}}菜单</span><i @click="$emit('add_menu_call')" class="el-icon-close"></i></div>
          <div class="content">
            <el-form ref="formData" :model="formData" :rules="rules" label-width="auto">
              <el-form-item label="类型" prop="type">
                <el-radio-group v-model="formData.type">
                  <el-radio  label="0">目录</el-radio>
                  <el-radio  label="1">菜单</el-radio>
                  <el-radio  label="2">按钮</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="菜单名称" prop="name">
                <el-input v-model="formData.name" type="text" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="范围" prop="useType">
                <el-select v-model="formData.useType" placeholder="请选择">
                  <el-option label="三者共用" value=0></el-option>
                  <el-option label="总平台" value=1></el-option>
                  <el-option label="仅运营商" value=2></el-option>
                  <el-option label="仅区域代理" value=3></el-option>
                  <el-option label="仅商家" value=4></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="上级菜单" prop="parentId">
                <el-button @click="show_parent_meun">{{formData.label}}</el-button>
              </el-form-item>
              <el-form-item label="菜单URL" prop="url">
                <el-input v-model="formData.url" type="text" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item v-if="formData.type==2" label="页面对应id" prop="buttonCode">
                <el-input v-model="formData.buttonCode" type="text" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="授权标识" prop="perms">
                <el-input v-model="formData.perms" type="text" placeholder="请输入"></el-input>
              </el-form-item>
            </el-form>

            <div class="btns">
              <el-button @click="$emit('add_menu_call')">取消</el-button>
              <el-button @click="submitForm('formData')" type="primary">确定</el-button>
            </div>

          </div>
        </div>

        <parent_meun :res="parent_meun" v-if="parent_meun.show" v-on:parent_meun_call="parent_meun_call"></parent_meun>
    </div>
</template>

<script>
  import parent_meun from "./parent_meun";
    export default {
      components:{
        parent_meun
      },
      data(){
          return{
            parent_meun:{
              show:false,
              userType:null
            },
            parentData:{
              label:'请选择',
              value:''
            },
            formData:{
              type:'0',
              name:'',
              useType:'1',
              url:'',
              perms:'',
              label:'请选择',
              parentId:'',
              buttonCode:''
            },
            rules:{
              type: [{ required: true, message: '请输入', trigger: 'blur' }],
              name: [{ required: true, message: '请输入', trigger: 'blur' }],
              useType: [{ required: true, message: '请输入', trigger: 'blur' }],
              parentId: [{ required: true, message: '请选择', trigger: 'blur' }],
              url: [{ required: false, message: '请输入', trigger: 'blur' }],
              perms: [{ required: false, message: '请输入', trigger: 'blur' }],
              buttonCode: [{ required: true, message: '请输入', trigger: 'blur' }],
            }
          }
      },
      props:['res'],
      mounted(){

        if(this.res.id){
          this.getData();
        }

      },
      methods:{
        async getData(){
          var res=await this.apis.sys_menu_info({
            menuId:this.res.id
          });
          var data=res.data;
          console.log(data);
          this.formData.type=data.type==0?'0':data.type+'';
          this.formData.name=data.name;
          this.formData.useType=''+data.useType;
          this.formData.label=data.parentName||'无';
          this.formData.parentId=data.parentId;
          this.formData.url=data.url;
          this.formData.perms=data.perms;
          this.formData.buttonCode=data.buttonCode;
        },
        submitForm(formName) {
          console.log(formName);
          this.$refs[formName].validate((valid) => {
            if (valid) {
              if(!this.res.id){
                this.add_menu();
              }else{
                this.edit_menu();
              }

            }
          });
        },
        async edit_menu(){
          var res=await this.apis.sys_menu_update({
            menuId:this.res.id,
            parentId:this.formData.parentId==999999?null:this.formData.parentId,
            name:this.formData.name,
            perms:this.formData.perms,
            type:this.formData.type,
            url:this.formData.url,
            useType:this.formData.useType,
            buttonCode:this.formData.buttonCode
          });
          this.$emit('add_menu_call',true);
        },
        async add_menu(){
          var res=await this.apis.sys_menu_save({
            parentId:this.formData.parentId==999999?0:this.formData.parentId,
            name:this.formData.name,
            perms:this.formData.perms,
            type:this.formData.type,
            url:this.formData.url,
            useType:this.formData.useType,
            buttonCode:this.formData.buttonCode
          });
          console.log(res);
          this.$emit('add_menu_call',true);
        },
        show_parent_meun(){
          this.parent_meun.userType=this.formData.useType;
          this.parent_meun.show=true;
        },
        parent_meun_call(res){
          this.parent_meun.show=false;
          if(res){
            this.formData.label=res.name;
            this.formData.parentId=res.menuId;
          }
        }
      }
    }
</script>

<style scoped lang="scss">

</style>
